<!--
   pdf说明：取的PDF文件转成图片预览
 -->

<template>
  <div class="see-pdf" :style="'width:'+width+'px'">
    <div class="see-pdf-item" v-for="i in numPages">
      <vue-pdf :key="i" :src="src" :page="i" style="width: 100%"></vue-pdf>
    </div>
  </div>
</template>
<script>
  import vuePdf from "vue-pdf";
  export default {
    props: {
    	value: {
    		type: String,
    		default: ''
    	},
      width: {
      	type: Number,
      	default: 800
      }
    },
    components: {
      vuePdf
    },
    data() {
      return {
        src: '',
        numPages: undefined,
      }
    },
    mounted() {
      this.init()
    },
    methods: {
        init(){
          this.src = vuePdf.createLoadingTask(this.value);
          this.src.promise.then(pdf => {
            this.numPages = pdf.numPages;
          }).catch(err=>{
            console.log(err)
          });
        }
    }
  }
</script>
<style lang="scss" scope>
  .see-pdf {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
     // background-color: rgb(82, 86, 89);
    .see-pdf-item{
      margin: 20px;
      background-color: #ffffff;
      width: 100%;
    }
  }
</style>
